<template>
	<view class="Column Box">
		<scroll-view scroll-with-animation scroll-y class="condition">
			<h4 class="title">分红奖励达标标准:</h4>
			<view class="contentText">
				<p>1.大区总和事业总专享大盘分红;</p>
				<p>2.团队月成功单量 1000 单以上;</p>
				<p>3.直推5个团队且月成功单量大于 100 单;</p>
				<p>4.活动期间内，每月核算，月度发放分红;</p>
			</view>
			<h4 class="title">分红奖励规则:</h4>
			<view class="contentText">
				<p>1、平台月成功单量为基数，分红奖金为 2-5元/单 ，计入大盘分红;</p>
				<p>2.分配机制为当月大盘分红奖励除以达标人数;</p>
			</view>
			<view class="Row rule" style="margin-top: 12rpx;">
				<view class="Row ruleChild">
					<view class="ruleLeft">等级</view>
					<view class="ruleCenter" style="color: #0056FF;text-align: center;">大区总/事业总</view>
				</view>
				<view class="iconfont" v-if="level_id >= 6">
					<u-icon name="checkmark-circle-fill" color="#20b759" size="26"></u-icon>
				</view>
				<view class="iconfont" v-else>
					<u-icon name="close-circle-fill" color="#cf002e" size="26"></u-icon>
				</view>
			</view>

			<view class="Row rule" style="border-top: none;border-bottom: none;">
				<view class="Row ruleChild">
					<view class="ruleLeft">当月已完成业绩</view>
					<view class="Row ruleCenter">
						<view class="merchant_num Row">
							<span>{{merchant_num ? merchant_num : 0}}</span>/1000
						</view>
					</view>
				</view>
				<view class="iconfont" v-if="merchant_num >= 1000">
					<u-icon name="checkmark-circle-fill" color="#20b759" size="26"></u-icon>
				</view>
				<view class="iconfont" v-else>
					<u-icon name="close-circle-fill" color="#cf002e" size="26"></u-icon>
				</view>
			</view>

			<view class="Row rule" style="border-bottom: none;">
				<view class="Row ruleChild">
					<view class="ruleLeft">累计直推人数</view>
					<view class="Row ruleCenter">
						<view style="color: #0056FF;">{{directNum ? directNum : 0}}</view>/5人
					</view>
				</view>
				<view class="iconfont" v-if="directNum >= 5">
					<u-icon name="checkmark-circle-fill" color="#20b759" size="26"></u-icon>
				</view>
				<view class="iconfont" v-else>
					<u-icon name="close-circle-fill" color="#cf002e" size="26"></u-icon>
				</view>
			</view>

			<view class="Row rule">
				<view class="Row ruleChild">
					<view class="ruleLeft">已完成团队业绩数</view>
					<view class="Row ruleCenter">
						<view style="color: #0056FF;">{{this.meetTheStandardNum ? this.meetTheStandardNum : 0}}</view>/5队
					</view>
				</view>
				<view class="iconfont" v-if="this.meetTheStandardNum >= 5">
					<u-icon name="checkmark-circle-fill" color="#20b759" size="26"></u-icon>
				</view>
				<view class="iconfont" v-else>
					<u-icon name="close-circle-fill" color="#cf002e" size="26"></u-icon>
				</view>
			</view>
		</scroll-view>

		<view class="Column" style="width: 94%;padding: 20rpx;margin-top: 20rpx;background-color: #fff;">
			<view class="Row childBox" style="margin-bottom: 40rpx;">
				<view class="Column headBox">
					<view class="headTop">上月分红的金额（元）</view>
					<view class="headBot">
						{{dividendData.lastMonthDividendAmount == null ? 0 : dividendData.lastMonthDividendAmount }}
					</view>
				</view>
				<view class="Column headBox">
					<view class="headTop">本月将分红的总金额（元）</view>
					<view class="headBot">{{dividendData.thisMonthDividendAmount}}</view>
				</view>
			</view>

			<view class="Row childBox">
				<view class="Column footBox" @click="DividendRecord()">
					<view class="footTop">本月已达标人数</view>
					<view class="footNum">{{dividendData.reachStandardUserNum}}</view>
				</view>
				<view class="Column footBox">
					<view class="footTop">本月预计分红金额</view>
					<view class="footNum">{{dividendData.expectedDividendAmount}}</view>
				</view>
			</view>

			<view class="Row Btn" @click="redirect('./history/history')">分红记录</view>
		</view>
	</view>
</template>

<script>
	import {
		postMenu,
		getMenu
	} from '@/utils/api.js';
	export default {
		data() {
			return {
				level_id: "",
				levelName: "",
				directNum: "",
				merchant_num: "",
				meetTheStandardNum: "",

				dividendData: "",

				check: false,
			};
		},
		onShow() {
			this.getDashboard()
		},
		methods: {
			DividendRecord() {
				uni.navigateTo({
					url: './DividendRecord/DividendRecord'
				})
			},

			redirect(Url) {
				uni.navigateTo({
					url: Url
				})
			},

			getDashboard() {
				let that = this;
				uni.showLoading({
					title: '数据加载中...'
				});
				uni.$u.http.post('/kafu/dt_month_dividend/dashboard ', {}).then(res => {
					if (res.code == 0) {
						return uni.$u.toast(res.msg);
					}
					uni.hideLoading();
					that.level_id = res.data.level_id;
					that.levelName = res.data.levelName;
					that.merchant_num = res.data.merchant_num;
					that.directNum = res.data.directNum;
					that.meetTheStandardNum = res.data.meetTheStandardNum;
					if (res.data.level_id >= 6 && res.data.merchant_num >= 1000 && res.data.directNum >=
						5 && res.data.meetTheStandardNum >= 5) {
						this.check = true;
					}
					that.dividendData = res.data;
				}).catch(err => {
					console.log(err)
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F6F8;
	}

	.Box {
		width: 92.4%;
		margin: 30rpx;

		.box {
			width: 100%;
			height: 10rpx;
			background-color: #e6e6e6;
			margin-bottom: 10px;
		}

		.iconfont {
			font-size: 26px;
			margin-right: 10px;
		}

		.condition {
			width: 94%;
			border-radius: 10rpx;
			background-color: #fff;
			padding: 20rpx;

			.title {
				font-size: 30rpx;
				border-left: 4rpx solid #0056FF;
				padding-left: 12rpx;
				margin: 14rpx 0;
			}

			.contentText {
				font-size: 28rpx;
			}

			.rule {
				justify-content: space-between;
				border: 1rpx solid #e6e6e6;

				.ruleChild {
					width: 86%;

					.ruleLeft {
						width: 50%;
						font-size: 30rpx;
						padding-left: 10px;
					}

					.ruleCenter {
						justify-content: center;
						width: 48%;
						border-left: 2rpx solid #e6e6e6;
						border-right: 2rpx solid #e6e6e6;
						padding: 6px 0;

						.merchant_num>image {
							width: 16px;
							height: 16px;
							margin-right: 4px;
						}

						.merchant_num>span {
							color: #0056FF;
						}
					}
				}
			}
		}

		.Btn {
			width: 93.3%;
			background-color: #f3f4f8;
			border-radius: 12rpx;
			border: 2rpx solid #e7e8ea;
			padding: 20rpx;
			margin-top: 20rpx;
		}

		.childBox {
			justify-content: space-between;
			width: 100%;

			.footBox {
				align-items: flex-start;
				width: 42%;
				border-radius: 8rpx;
				background-color: #f3f4f8;
				border: 2rpx solid #e7e8ea;
				padding: 20rpx;

				.footTop {
					color: #626262;
					font-size: 30rpx;
				}

				.footNum {
					font-size: 20px;
					font-weight: 600;
					margin-top: 20rpx;
				}
			}

			.headBox {
				align-items: center;
				width: 50%;

				.headTop {
					text-align: center;
					color: #626262;
					font-size: 28rpx;
					margin-bottom: 20rpx;
				}

				.headBot {
					font-size: 20px;
					font-weight: 600;
				}
			}
		}
	}
</style>